/**
 * 受控组件：
 *    表单元素的表现完全由 state 或 props 数据来控制
 *
 *    radio checkbox 是通过 checked 来控制
 *    其他表单元素是通过 value 来控制的
 *
 * 有时我们不希望某个表单元素变成受控组件，且已希望能根据某个 state 或 prop 控制它的初始值
 *    使用 defaultValue 代替 value
 *    使用 defaultChecked 代替 checked
 */

import React, { ChangeEventHandler } from "react";
import { Button, DatePicker } from "antd";
import dayjs from "dayjs";

class App extends React.Component {
  state = {
    username: "",
    remark: "一个帅气小伙子",
    city: "004",
    gender: "0", // 0 - 女 1 - 男
    fruits: ["Apple", "Banana"],
    flag: true,

    date: dayjs("2024-03-15"),
  };

  citys = [
    { id: "001", text: "北京" },
    { id: "002", text: "上海" },
    { id: "003", text: "广州" },
    { id: "004", text: "深圳" },
  ];

  changeUsername: ChangeEventHandler<HTMLInputElement> = (event) => {
    this.setState({
      username: event.currentTarget.value,
    });
  };

  changeRemark: ChangeEventHandler<HTMLTextAreaElement> = (event) => {
    this.setState({
      remark: event.currentTarget.value,
    });
  };

  changeCity: ChangeEventHandler<HTMLSelectElement> = (event) => {
    this.setState({
      city: event.currentTarget.value,
    });
  };

  changeGender: ChangeEventHandler<HTMLInputElement> = (event) => {
    this.setState({
      gender: event.currentTarget.value,
    });
  };

  changeFlag: ChangeEventHandler<HTMLInputElement> = () => {
    this.setState((state) => ({ flag: !state.flag }));
  };

  changeFruits: ChangeEventHandler<HTMLInputElement> = (event) => {
    const value = event.currentTarget.value;

    const { fruits } = this.state;

    if (fruits.includes(value)) {
      // 移除
      this.setState({
        fruits: fruits.filter((item) => item !== value),
      });
    } else {
      // 增加
      this.setState({
        fruits: [...fruits, value],
      });
    }
  };

  render(): React.ReactNode {
    const { username, remark, city, gender, fruits } = this.state;

    return (
      <div>
        <h1>App</h1>

        <DatePicker
          value={this.state.date}
          onChange={(d, s) => {
            console.log("d", d);
            console.log("s", s);
            this.setState({
              date: d,
            });
          }}
        />

        <Button
          onClick={() => {
            this.setState({
              date: dayjs("2024-03-16"),
            });
          }}
        >
          修改Date
        </Button>

        <hr />

        <input type="text" value={username} onChange={this.changeUsername} />

        <hr />
        <textarea defaultValue={remark}></textarea>

        <hr />
        <select value={city} onChange={this.changeCity}>
          {this.citys.map((item) => (
            <option key={item.id} value={item.id}>
              {item.text}
            </option>
          ))}
        </select>

        <hr />
        <label>
          <input
            name="sex"
            type="radio"
            value="1"
            checked={gender === "1"}
            onChange={this.changeGender}
          />
          <span>男</span>
        </label>
        <label>
          <input
            name="sex"
            type="radio"
            value="0"
            checked={gender === "0"}
            onChange={this.changeGender}
          />
          <span>女</span>
        </label>

        <hr />
        <label>
          <input
            type="checkbox"
            value={"Apple"}
            checked={fruits.includes("Apple")}
            onChange={this.changeFruits}
          />
          <span>Apple</span>
        </label>
        <label>
          <input
            type="checkbox"
            value={"Banana"}
            checked={fruits.includes("Banana")}
            onChange={this.changeFruits}
          />
          <span>Banana</span>
        </label>

        <hr />
        <label>
          <input
            type="checkbox"
            checked={this.state.flag}
            onChange={this.changeFlag}
          />
          <span>请同意我们的协议</span>
        </label>
      </div>
    );
  }
}

export default App;
